﻿<MCard Class="mx-auto card-misc-reveal" MaxWidth="344" Outlined>
    <MCardText>
        <div>Word of the Day</div>
        <p class="text-h4 text--primary">
            el·ee·mos·y·nar·y
        </p>
        <p>adjective</p>
        <div class="text--primary">
            relating to or dependent on charity; charitable.<br>
            "an eleemosynary educational institution."
        </div>
    </MCardText>

    <MCardActions>
        <MButton Text Color="teal accent-4" OnClick="() => _reveal = true">Learn More</MButton>
    </MCardActions>

    <ExpandTransition>
        <MCard Show="@_reveal" Class="transition-fast-in-fast-out m-card--reveal" Style="height: 100%">
            <MCardText Class="pb-0">
                <p class="text-h4 text--primary">
                    Origin
                </p>
                <p>late 16th century (as a noun denoting a place where alms were distributed): from medieval Latin eleemosynarius, from late Latin eleemosyna ‘alms’, from Greek eleēmosunē ‘compassion’ </p>
            </MCardText>
            <MCardActions Class="pb-0">
                <MButton Text Color="teal accent-4" OnClick="() => _reveal = false">Close</MButton>
            </MCardActions>
        </MCard>
    </ExpandTransition>
</MCard>

<style>
    .card-misc-reveal .m-card--reveal {
        bottom: 0;
        opacity: 1 !important;
        position: absolute;
        width: 100%;
    }
</style>

@code {
    bool _reveal;
}